import React, {PureComponent} from 'react';
import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';

export default class extends PureComponent {
    render() {
        const {collect, linkToCoupon, itemInfo, navigation} = this.props;
        return (
            <View style={styles.container}>
                <TouchableOpacity style={{flex: 1}} onPress={collect}>
                    <View style={[styles.item, styles.collectItem]}>
                        <Image source={require('./img/icon_collect.png')} style={styles.img}/>
                        <Text style={styles.collectText}>收藏</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{flex: 2}} onPress={() => {
                    navigation.navigate('share', {itemId: itemInfo.num_iid});
                }}>
                    <View style={[styles.item, styles.shareItem]}>
                        <Image source={require('./img/icon_share.png')} style={styles.img}/>
                        <Text style={styles.shareText}>
                            {
                                itemInfo.commission > 0 ? <Text>分享赚{itemInfo.commission}元</Text> : '分享宝贝'
                            }
                        </Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={{flex: 2}} onPress={linkToCoupon}>
                    <View style={[styles.item, styles.couponItem]}>
                        <Text style={styles.couponText}>抢券￥<Text
                            style={{fontSize: 22}}>{itemInfo.coupon_value}</Text>
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        height: 40,
        borderTopWidth: 1,
        borderColor: '#eaeaea',
        flexDirection: 'row'
    },
    item: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    collectItem: {
        flexDirection: 'column'
    },
    shareItem: {
        backgroundColor: '#fddedb'
    },
    couponItem: {
        backgroundColor: '#f3301c'
    },
    img: {
        width: 20,
        height: 20
    },
    collectText: {
        fontSize: 10,
        color: '#3e403f',
        marginTop: 4
    },
    shareText: {
        fontSize: 12,
        color: '#f3301c',
        marginLeft: 6
    },
    couponText: {
        fontSize: 12,
        color: '#fff'
    }
});
